<template>
  <div class="results-container">
    <header>
      <h1>前途无忧 - 搜索结果</h1>

    </header>
    <div class="search-results" v-if="searchResults.length > 0">
      <h2>搜索结果</h2>
      <ul>
        <li v-for="job in searchResults" :key="job.job_name" class="result-item">
          <p>{{ job.job_name }} - ￥{{ job.salary }}</p>
          <p>公司: {{ job.company_name }}</p>
          <button @click="viewJobDetails(job.job_name)">查看详情</button>
        </li>
      </ul>
    </div>
    <div v-else-if="searchPerformed && searchResults.length === 0" class="no-results">
      <p>没有找到符合条件的职位。</p>
      <button @click="goToNewPage">点击这里返回到上一界面</button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import axios from 'axios';

export default {
  data() {
    return {
      searchResults: [],
      searchPerformed: false
    };
  },
  components: { NavBar },
  created() {
    this.fetchResults();
  },
  methods: {
    fetchResults() {
      const { job_name, fl } = this.$route.query;
      console.log('接收的搜索条件:', job_name, fl);
      axios.get('http://localhost:8099/jobs/search', {
        params: {
          job_name,
          fl
        }
      }).then(response => {
        this.searchResults = response.data;
        this.searchPerformed = true;
      }).catch(error => {
        console.error('搜索错误:', error);
        this.searchPerformed = true;
      });
    },
    goToNewPage() {
      this.$router.push({ name: 'job-search' }); // 假设目标页面的路由名称是 'job-search'
    },
    viewJobDetails(jobName) {
      this.$router.push({ name: 'job-details', params: { jobName } }); // 假设目标页面的路由名称是 'job-details'
    }
  }
}
</script>

<style>
.results-container {
  text-align: center;
  padding: 20px;
}

.search-results {
  margin-top: 20px;
}

.search-results ul {
  list-style-type: none;
  padding: 0;
}

.search-results li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.result-item {
  border: 1px solid #000; /* 黑色边框 */
  padding: 10px;
  background-color: #fff; /* 白色背景 */
  margin: 10px 0; /* 上下间距 */
  border-radius: 5px; /* 圆角边框 */
}

.result-item button {
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.result-item button:hover {
  background-color: #0056b3;
}

.no-results {
  padding: 20px;
  background-color: #f8d7da; /* 设置背景色，以确保可见性 */
  border: 1px solid #f5c6cb; /* 设置边框 */
  border-radius: 5px; /* 设置圆角 */
}

.no-results button {
  margin-top: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.no-results button:hover {
  background-color: #0056b3;
}
</style>